<template>
	<view>
		<u-popup :show="show" overlayOpacity='0' mode="right" closeIconPos="top-left" @close="hide">
			<view class="popup_content">
				<u-navbar title="实名认证" bgColor="#fff" :titleStyle="{color:'#333'}" leftIconColor="#333"
					:autoBack="false" leftIconSize="40" @leftClick="hide">
				</u-navbar>
				<u--image class="img" src="../../static/image/payout.svg" width="78px" height="78px"></u--image>
				<view class="tips">实名认证成功</view>
				<view class="tips_item">实名信息认证后不可修改</view>
				<view class="box" v-if="userInfo.bankcard">
					<view class="box_item" >
						<view class="label">姓名</view>
						<view class="value">{{userInfo.userName.substr(0,1) + new Array(userInfo.userName.length).join('*')}}</view>
					</view>
					<view class="box_item">
						<view class="label">手机号</view>
						<view class="value">{{userInfo.phone.substr(0,3) + "****" + userInfo.phone.substr(7)}}</view>
					</view>
					<view class="box_item">
						<view class="label">身份证</view>
						<view class="value">{{userInfo.card.substr(0,4) + "**********" + userInfo.card.substr(14)}}</view>
					</view>
					<view class="box_item">
						<view class="label">银行卡</view>
						<view class="value">{{userInfo.bankcard.substr(0,4) + "***********" + userInfo.bankcard.substr(-4)}}</view>
					</view>
				</view>
				<u-button :custom-style="{
				  width:'686rpx',
				  marginTop: '100rpx',
				  borderRadius: '50rpx',
				  padding: '28rpx 0',
				  color: '#333',
				  fontSize: '32rpx',
				  background: 'linear-gradient(91.63deg, #1cc7c2 0%, #cdf8f7 137.56%)',
				  borderColor: 'transparent',
				  fontWeight:'800',
				  border:'0',
				  height: '42px',
				  lineHeight: '42px'}" @click="hide">关闭</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import md5 from "@/common/md5.js"
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				userInfo: {},
			};
		},
		async created() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			}else {
				this.userInfo = await this.$api.getUserInfo();
			}
		},
		methods: {
			hide() {
				this.$emit('hide')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		padding: 30rpx 0 0;
		position: relative;
	}

	.img {
		width: 78px;
		margin: 160rpx auto 0 auto;
	}

	.tips {
		width: 100%;
		padding: 30rpx 0 0rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #333;
	}
	.tips_item{
		width: 100%;
		padding: 16rpx 0 48rpx 0;
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}
	.box {
		width: calc(100% - 80rpx);
		border-radius: 20rpx;
		background-color: #ffffff;
		padding: 40rpx;
		margin: 0 auto;
		box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08), 0px 2px 20px rgba(0, 0, 0, 0.04);
		&_item {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			margin-bottom: 40rpx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			.label {
				width: 120rpx;
				text-align: left;
				color: #333;
			}

			.value {
				width: calc(100% - 120rpx);				
				color: #333;
			}
		}
	}
</style>
